SELFHTML/Quickbar
HTML
Universalattribute SELFHTML/Quickbar
HTML
Universalattribute
 |
Event-Handler |
|
|
 | |
Allgemeines zu Event-Handlern
Anzeigebeispiel: So sieht's aus
Event-Handler (Ereignis-Behandler) sind HTML-Attribute, die eine Verknüpfung zu einer Scriptsprache herstellen. Ein Ereignis ist zum Beispiel ein Mausklick oder ein Tastendruck des Anwenders. Ein Element, das einen Event-Handler enthält, kann auf ein solches Ereignis reagieren, wenn das Ereignis im Anzeigebereich des Elements stattfindet. Mit dem Event-Handler können Sie beispielsweise eine 
JavaScript-Funktion aufrufen, die das Ereignis verarbeitet und reagiert.
<p onClick="alert('Sie haben in den Absatz geklickt!')">ein Textabsatz</p>
|
Das Beispiel enthält einen Textabsatz <p> ... </p>. Im einleitenden <p>-Tag ist der Event-Handler onClick= notiert. Event-Handler erkennen Sie in der Regel daran, daß diese mit on... beginnen. Der Event-Handler onClick= bedeutet so viel wie "beim Anklicken". Dies bezieht sich auf den Anzeigebereich des Textabsatzes.
Im Beispiel wird mit Hilfe eines Dialogfensters am Bildschirm ausgegeben: "Sie haben in den Absatz geklickt!". Das ist JavaScript-Syntax. Auf die Sprachelemente von JavaScript wird hier nicht näher eingegangen. Lesen Sie dazu die JavaScript-Dokumentation.
Netscape bis einschließlich Version 4.x interpretiert Event-Handler zwar, aber nur bei bestimmten HTML-Tags. Zwar gibt es viele Event-Handler, die auch nur in bestimmten HTML-Tags Sinn haben. Doch insgesamt ist die Ereignisbehandlung in HTML-Elementen nach dem HTML-4.0-Standard deutlich weiter gefaßt, als es in Netscape's JavaScript 1.0, 1.1 und 1.2 der Fall ist. So funktioniert mit Netscape auch das obige Beispiel nicht.
Der MS Internet Explorer interpretiert erweiterte Event-Handler seit der Produktversion 4.x. Ob dabei allerdings alle denkbaren Möglichkeiten des HTML-4.0-Standards abgedeckt werden, läßt sich kaum nachprüfen. Das obige Beispiel (und auch das Anzeigebeispiel) funktionieren jedenfalls mit dem Internet Explorer 4.x.
|
Liste der Event-HandlerDie folgende Liste enthält diejenigen Event-Handler, die in der HTML-4.0-Spezifikation des W3-Konsortiums genannt werden. Mehr zu den Event-Handlern erfahren Sie innerhalb der JavaScript-Dokumentation im Abschnitt über 
Event-Handler als Teil der JavaScript-Sprachelemente.
| Event-Handler | Bedeutung | Beispiel | erlaubt in diesen HTML-Tags |
| onblur= | "beim Verlassen des Elements" | siehe onBlur in JavaScript |
<a> <area> <button> <input> <label> <select> <textarea> |
| onchange= | "bei geändertem Wert eines Elements" | siehe onChange in JavaScript |
<input> <select> <textarea> |
| onclick= | "beim Anklicken mit der Maus" | siehe onClick in JavaScript |
<a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var> |
| ondblclick= | "beim Doppelklick mit der Maus in den Bereich des Elements" | siehe onDblClick in JavaScript |
<a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var> |
| onfocus= | "beim Positionieren auf das Element" | siehe onFocus in JavaScript |
<a> <area> <button> <input> <label> <select> <textarea> |
| onkeydown= | "wenn Taste gedrückt" (aber noch nicht losgelassen) | siehe onKeyDown in JavaScript |
<a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var> |
| onkeypress= | "wenn Taste gedrückt" (und wieder losgelassen) | siehe onKeyPress in JavaScript |
<a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var> |
| onkeyup= | "wenn Taste losgelassen" | siehe onKeyUp in JavaScript |
<a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var> |
| onload= | "beim Laden" | siehe onLoad in JavaScript |
<frameset> <body> |
| onmousedown= | "bei gedrückter Maustaste" | siehe onMousedown in JavaScript |
<a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var> |
| onmousemove= | "beim Bewegen der Maus" | siehe onMousemove in JavaScript |
<a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var> |
| onmouseout= | "wenn die Maus den Elementbereich verläßt" | siehe onMouseout in JavaScript |
<a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var> |
| onmouseover= | "wenn die Maus den Elementbereich erreicht" | siehe onMouseover in JavaScript |
<a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var> |
| onmouseup= | "beim Loslassen der gedrückten Maustaste" | siehe onMouseup in JavaScript |
<a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var> |
| onreset= | "beim Zurücksetzen" | siehe onReset in JavaScript |
<form> |
| onselect= | "beim Selektieren von Text" | siehe onSelect in JavaScript |
<input> <textarea> |
| onsubmit= | "beim Absenden" | siehe onSubmit in JavaScript |
<form> |
| onunload= | "beim Beenden" | siehe onUnload in JavaScript |
<body> <frameset> |
|
| |
weiter: |
Style-Sheets und HTML
|
zurück: |
Verschiedene Universalattribute
|
